[前言]

前端技術這幾年真的變化很快，常常會覺得有好多名詞冒出來，這兩年因為工作上的關係開始使用React，透過使用React可以學習到其他現在前端開發熱門的一些技能，Ex:ES6+、Module、Babel、Webpack...等，希望能用分享的方式，從React出發把學到的好好記錄下來！

Reactjs

React是由Facebook推出的JS Library，官方網站一打開就寫著：

「A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES」

它是一個專注在View/UI的Library，React 0.14版本之後，又把處理DOM的部分獨立出來(react-dom)，讓核心更單純。由於很多人都覺得major版號一直是0，感覺unstable，在今年初React直接從0.14.x升到15.0.0，所以是找不到1.0.0版的。

ES6+

ES6+是ES6(ES2015)和ES7的聯集，有許多新的特性和功能，因為ES6+在browser的支援度會越來越好，所以之後的demo都會用ES6+的語法來進行，之後也會用babel+webpack來幫忙處理build的部分。

Babel

Babel 是一個Javascript Compiler，可以幫忙把ES6、JSX的語法轉成瀏覽器看得懂的語法。如果是用CLI(command-line interface)執行compile，要在根目錄上放一個 .babelrc 檔案，config babel設定，或是也可以用package.json來設定。不過，後面會提到使用webpack來build的方式，所以這邊babel設定的方式可以當參考。

Directory structure

app
├── .babelrc
├── packag.json
├── index.jsx
└── index.html

[Config方式一]

設定 .babelrc

{
  "presets": ["es2015", "react"]
}

[Config方式二]

設定 package.json

{
  "name": "app",
  "version": "1.0.0",
  "babel": {
    "presets": ["es2015", "react"]
  }
}

Webpack

Webpack是一個Module Bundler，幫你把許多不同類型的模組build成靜態資源，可以同時整合CommonJS和AMD，還有很多loaders跟plugins可以使用。Config的方式也是在根目錄放一個webpack.config.js檔案，這個檔案也可以依照prod或是dev環境不同命名，Ex:webpack.config.prod.js、webpack.config.dev.js。

webpack.config.js

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'       
  }
};

CLI

// 基本CLI指令
webpack

// 自行指定config檔
webpack --config webpack.config.prod.js
webpack --config webpack.config.dev.js

NPM

NPM(Node Package Manager)是Node.js的套件管理工具，在上面可以搜尋的到很多很厲害的套件，都可以透過npm引用在我們的專案中。

好想說的更簡單一些，可是真的就會用到這麼多東西XD
每一個又都可以多些很多篇，可是我覺得有用到的時候才更能體會
所以讓我們先簡單看一下，後面再一步一步的把工具與設定加上去！
加油，我們都不要放棄~